<template>
  <el-form :inline="true" >
    <el-form-item>
      <el-button type="back" icon="back" @click="back()">返回班级管理</el-button>
      <el-button type="primary" icon="Plus" @click="AddStudent()">添加学生</el-button>
      <el-button type="danger" icon="Delete" @click="deleteStudent(multipleTableRef)">批量删除</el-button>
    </el-form-item>
  </el-form>

  <!-- 模糊查询开始 -->
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="当前班级:" style="align-items: center;">
      {{  name }}
      <!-- <el-select autocomplete="off" v-model="formInline.classId" placeholder="选择班级" :loading="loadingClass" style="margin: 10px;" >
        <el-option
                                    v-for="classList in classList"
                                    :label="classList.className"
                                    :value="classList.id"
                                    :key="classList.className"
                               />    
                        </el-select>
                        <el-button type="primary" @click="onSubmit">转到</el-button> -->
    </el-form-item>
    <el-form-item label="学号: "> 
      <el-input v-model="formInline.studentId" placeholder="请输入学号" clearable />
    </el-form-item>
    <el-form-item label="姓名:">
      <el-input v-model="formInline.name" placeholder="请输入姓名" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">搜索</el-button>
      <el-button @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
  <!-- 模糊查询结束 -->

  <!-- 列表渲染开始 -->
  <el-table ref="multipleTableRef" v-loading="loading" style="width: 100%" :data="tableData"
    @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" align="center" />
    <el-table-column label="序号" width="55" align="center">
      <template v-slot="scope">
        {{ (page - 1) * size + scope.$index + 1 }}
      </template>
    </el-table-column>
    <el-table-column property="studentId" width="100" label="学号" align="center" />
    <el-table-column label="头像" width="55" align="center">
      <template v-slot="scope">
        <div class="block">
          <el-avatar shape="square" :size="30" :src="tableData[scope.$index].avatar" />
        </div>
      </template>
    </el-table-column>
    <el-table-column property="name" label="姓名" width="100" align="center" />
    <el-table-column property="gender" label="性别" width="100" align="center" />
    <el-table-column property="age" label="年龄" width="100" align="center" />
    <el-table-column property="telephone" label="手机号" min-width="50" align="center" />
    <el-table-column property="className" label="班级" min-width="50" align="center" />
    <el-table-column property="statusGraduation" label="就业状态" width="100" align="center">
      <template v-slot="scope">
        <el-tag :type="scope.row.statusGraduation === 1 ? 'info' : 'success'" disable-transitions>
          {{ scope.row.statusGraduation === 1 ? '未就业' : '已就业' }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column label="启用状态" fixed="right" width="70" align="center">
      <template v-slot="scope">
        <el-switch size="small" v-model="scope.row.status" 
         @click="updateStatus(scope.row.id)"
        :active-value="1" 
        :inactive-value="0"/>
      </template>
    </el-table-column>
    <el-table-column label="操作" fixed="right" min-width="80" align="center">
      <template v-slot="scope">
        <el-link type="primary" icon="edit" style="margin-right: 10px" @click="showEmp(scope.row)">添加就业</el-link>
        <el-link type="primary" icon="edit" style="margin-right: 10px" @click="showUpdate(scope.row)">修改</el-link>
        <el-link type="danger" icon="delete" style="margin-right: 10px" @click="deleteStudent(scope.row.id)">删除</el-link>
      </template>
    </el-table-column>
  </el-table>
  <div class="demo-pagination-block" style="margin-top: 20px">
    <el-pagination v-model:current-page="page" v-model:page-size="size" :page-sizes="[5, 10, 15, 20]" :total="total"
      :background="true" layout="total, sizes, prev, pager, next" @current-change="handleCurrentChange"
      @size-change="handleSizeChange" />
  </div>
  <!-- 列表渲染结束 -->
   <!-- 添加就业信息-->
   <AddEmploymentview v-if="addEmpDialog" v-model:addEmpDialog="addEmpDialog" @loadStudentData="loadStudentData()" :rowData="rowData"/>
   <!-- 添加学生 -->
   <AddStudentView v-if="addDialog" v-model:addDialog="addDialog" @loadStudentData="loadStudentData()" :classId="classId" :className="name"/>
    <!-- 修改学生 -->
    <UpdateStudentView v-if="updateDialog" v-model:updateDialog="updateDialog" @loadStudentData="loadStudentData()" :rowData="rowData" />
</template>

<script setup>
import { ref, onMounted, reactive } from "vue"
import axios from "@/axios/index.js"
import { ElMessageBox, ElMessage, ElTable } from "element-plus"
import AddStudentView from "./AddStudentView.vue";
import UpdateStudentView from "./UpdateStudentView.vue";
import AddEmploymentview from "../employment/AddEmploymentview.vue"; 
import { useRoute } from "vue-router";
import router from "@/router";

const route = useRoute()

const loading = ref(true)
const loadingClass = ref(true)
const multipleTableRef = ref()
const tableData = ref([])
let rowData = ref([])
let addDialog = ref(false)
let updateDialog = ref(false)
let addEmpDialog = ref(false)
let classId = ref()
let name = ref()
const page = ref(1) //当前页
const size = ref(5) //每页显示条数
const total = ref(100) //总记录数

//初始化
onMounted(async ()=>{
  const { classId,className } = route.query
  name.value = className
  formInline.value.classId = +classId
  console.log(name);
  
  await loadStudentData()
})

//添加学生
function AddStudent() {
  classId.value = formInline.value.classId
  addDialog.value = true
}

//修改菜单
function showUpdate(row) {
  rowData.value = row
  rowData.value.className = name.value
  updateDialog.value=true
}

//条件模糊搜索
function onSubmit(params) {
  console.log(formInline.value);
  
  loadStudentData()
}

//切换size
function handleSizeChange(sizeInfo) {
  size.value = sizeInfo
  loadStudentData()
}

//返回
function back() {
  if (route) {
    router.push({path:'/classManagement'})
  }
}

//切换页面
function handleCurrentChange(pageInfo) {
  page.value = pageInfo
  loadStudentData()
}

//模糊搜索表单
const formInline = ref({
  studentId: "",
  name: "",
  classId: "",
})

//多选框点击添加数据
function handleSelectionChange(id) {
   multipleTableRef.value = id
}


// let classList = []

loadingClass.value = true

//获取班级列表
// axios.get('/api/v1/class/getClassList').then(resp => {
//     classList = resp.data.data.data
//     loadingClass.value = false
// })

//添加就业信息
function showEmp(row) {
  rowData.value = row
  addEmpDialog.value = true
}

//清空模糊搜索框
let reset = function () {
  formInline.value.studentId="",
  formInline.value.name=""
  onSubmit()
}

//停启用按钮
function updateStatus(id) {
  ElMessageBox.confirm("该操作将改变学生启用状态,请确认是否继续操作?", "系统提示", {  
    confirmButtonText: "确认",  
    cancelButtonText: "取消",  
    type: "warning",  
  }).then(() => {
    axios.post("/student/statusUpdate",{id : id}).then(resp => {
      ElMessage({  
        type: "success",  
        message: "修改成功",  
      });
      loadStudentData(page.value,size.value)
    })
  })
  loadStudentData(page.value,size.value)
}

//批量删除按钮
let deleteStudent = function (id) {  
  let ids = ref([]);   
  if (typeof id === "number") {  
    ids.value.push(id);  
  } else {  
    for (let i = 0; i < id.length; i++) {  
      ids.value.push(id[i].id);  
    }  
  }
  if (ids.value.length === 0) {
        ElMessage({
                type: "error",
                message: "未选择删除的信息",
            })
            return
    }
  ElMessageBox.confirm("该操作将永久删除数据,请确认是否继续操作?", "系统提示", {  
    confirmButtonText: "确认",  
    cancelButtonText: "取消",  
    type: "warning",  
  }).then(() => {  
    axios.delete(`/student/deleteByIds`,{params:{
      ids : ids.value.join(",")
    }}).then((response) => { // 使用 DELETE 方法  
      ElMessage({  
        type: "success",  
        message: "删除成功",  
      });  
      loadStudentData(page.value, size.value); // 确保 page 和 size 已被定义  
    }).catch((error) => {  
      ElMessage({  
        type: "error",  
        message: "删除失败: " + error.message,  
      });  
    });  
  }).catch(() => {  
    // 用户点击了取消  
  });  
};


//获取学生列表
async function loadStudentData() {
  loading.value = true
  axios.get("/student/selectAll", {
    params: {
      current: page.value,
      size: size.value,
      ...formInline.value
    }}).then(resp => {
    tableData.value = resp.data.data.records
    tableData.value.forEach(item => {
      if(item.avatar == '' || item.avatar == null){
        item.avatar = 'https://blb-manage.oss-cn-wuhan-lr.aliyuncs.com/8571825f-b7cd-45ec-ba44-f15accb471bc.png'
        }
    });
    total.value = resp.data.data.total
    loading.value = false
  })
}


</script>

<style lang="less" scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
